<template>
  <view class="p-lr-20 relative">
    <u-navbar title="选择人员" :background="{ backgroundColor: '#9CE0FF' }" :border-bottom="false" title-color="#000"
      title-size="37" />
    <u-checkbox-group class="w-full" max="3" @change="change" size="40">
      <view class="flex justify-center w-full" v-if="!staffList.length && !loading">
        <empty-icon></empty-icon>
      </view>
      <view v-else class="flex w-full flex-column" id="container" :style="{ minHeight: `calc(100vh - ${top}px - 244rpx)` }">
        <view v-for="(item, index) in staffList" :key="index" class="h-142 flex align-center border-bottom-CCCCCC">
          <check-box class="w-full h-full flex ml-20" :name="item.staffId" v-model="item.checked" :disabled="false"
            shape="circle" active-color="#19BE6B">
            <view class="ml-55">
              <text class="flex1 font-bold fz-32 text-ellipsis-2"> {{ item.staffName }} </text>
            </view>
          </check-box>
        </view>
      </view>
    </u-checkbox-group>
    <view class="flex align-center justify-end h-244 sticky bottom0 bg-fff" v-if="staffList.length">
      <view class="h-60 w-120 br-5 border-2D8CF0 fz-28 color-2D8CF0 lh-60 text-center mr-50" @tap="back">
        <text>取消</text>
      </view>
      <view class="h-60 w-120 br-5 border-2D8CF0 fz-28 color-fff lh-60 text-center bg-2D8CF0 mr-50" @tap="chooseEngineer">
        <text>确定</text>
      </view>
    </view>

    <!--未选择人员模态框-->
    <u-modal border-radius="20" :show-confirm-button="false" :show-title="false" mask-close-able v-model="emptyModel">
      <view class="h-150 flex align-center justify-center font-bold fz-30">
        <image class="mr-20 w-38 h-38" src="@/static/images/mine/error.png"></image>
        <text>请选择人员进行分配</text>
      </view>
    </u-modal>

    <!--确认选择人员模态框-->
    <u-modal v-model="confirmModel" :show-confirm-button="false" :show-title="false" border-radius="20" mask-close-able>
      <view class="flex flex-column align-center p-lr-20">
        <view class="border-bottom-CCCCCC w-full text-center lh-116 fz-40 font-bold color-333333 font-bold">
          <text>选择人员</text>
        </view>
        <view class="border-bottom-CCCCCC w-full p-lr-20 flex justify-between lh-102 fz-30"
          v-for="(item, index) in checkStaffList" :key="index">
          <text>{{ item.staffNo }}</text>
          <text>{{ item.staffName }}</text>
        </view>


        <view class="flex align-center justify-center mt-60 mb-50">
          <view class="border-2D8CF0 w-120 h-60 border-box color-2D8CF0 fz-28 text-center lh-60 br-5 mr-50"
            @tap="confirmModel = false">
            <text>取消</text>
          </view>
          <view class="bg-2D8CF0 w-120 h-60 color-fff fz-28 text-center lh-60 br-5" @tap="confirm">
            <text>确定</text>
          </view>
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
import CheckBox from "@/components/CheckBox/CheckBox";
import getNavBarHeight from "@/mixins/getNavBarHeight";
import { option , optionStaffByCompany } from "@/api/basic/staff";
import EmptyIcon from "@/components/EmptyIcon/EmptyIcon";

export default {
  name: "choose-worker",
  components: { EmptyIcon, CheckBox },
  mixins: [getNavBarHeight],
  data () {
    return {
      //人员列表
      staffList: [],
      //分配人员Id列表
      staffIds: [],
      //分配人员列表
      checkStaffList: [],

      hospitalId: '',
      companyId:'',
      emptyModel: false,
      confirmModel: false,
      loading: true,
    }
  },
  onLoad (options) {
    let type = ''
    if (options.hospitalId) {
      this.hospitalId = options.hospitalId
    }
    if (options.companyId) {
      this.companyId = options.companyId
    }
    if (options.type) {
      type = options.type
    }
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('hospitalId', hospitalId => this.hospitalId = hospitalId)
    eventChannel.on('companyId', companyId => this.companyId = companyId)
    eventChannel.on('type', value => type = value)
    this.init(type)
  },
  methods: {
    init (type) {
      this.loading = true
      this.staffList = []
      if (type === 'hospital') {
        return Promise.all([
          this.optionHospitalStaff(this.hospitalId,'manager'),
          this.optionHospitalStaff(this.hospitalId,'engineer'),
        ]).then(res=>{
        this.staffList = res.reduce((pre, next) => {
          const preList = pre.map(item=>{ return {...item,checked:false} })
          const nextList = next.map(item=>{ return {...item,checked:false} })
          preList.push(...nextList)
          return preList
        }, [])
      }).finally(() => {
        this.loading = false
      })
      } else if (type === 'company'){
        return Promise.all([
          this.optionStaffCompany(this.companyId,'manager'),
          this.optionStaffCompany(this.companyId,'engineer'),
        ]).then(res=>{
        this.staffList = res.reduce((pre, next) => {
          const preList = pre.map(item=>{ return {...item,checked:false} })
          const nextList = next.map(item=>{ return {...item,checked:false} })
          preList.push(...nextList)
          return preList
        }, [])
      }).finally(() => {
        this.loading = false
      })
      }
      // // const postCode = isManager ? 'manager' : 'engineer'
      // Promise.all([this.optionHospitalStaff(this.hospitalId,postCode),this.optionStaffCompany(this.companyId,postCode)])
      // .then(res=>{
      //   this.staffList = res.reduce((pre, next) => {
      //     const preList = pre.map(item=>{ return {...item,checked:false} })
      //     const nextList = next.map(item=>{ return {...item,checked:false} })
      //     preList.push(...nextList)
      //     return preList
      //   }, [])
      // }).finally(() => {
      //   this.loading = false
      // })
    },
    optionHospitalStaff(hospitalId,postCode){
      if(!hospitalId)return [];
      return option({hospitalId,postCode}).then(res=>{
          return Promise.resolve(res.data)
      }).catch((res)=>{
        return Promise.resolve([])
      })
    },
    optionStaffCompany(companyId,postCode){
      if(!companyId)return [];
      return optionStaffByCompany(companyId,postCode).then(res=>{
          return Promise.resolve(res.data)
      }).catch((res)=>{
        return Promise.resolve([])
      })
    },
    change (detail) {
      this.staffIds = detail
    },
    back () {
      this.backEmit()
    },
    chooseEngineer () {
      if (this.staffIds.length) {
        this.checkStaffList = this.staffList.filter(item => item.checked)
        this.confirmModel = true
      }
      else {
        this.emptyModel = true
      }
    },
    confirm () {
      this.backEmit(this.checkStaffList)
    },
    backEmit (checkStaffList) {
      const eventChannel = this.getOpenerEventChannel()
      eventChannel.emit('getStaff', {
        staffList: checkStaffList || []
      })
      uni.navigateBack({
        delta: 1
      });
    }
  },
  options: { styleIsolation: "shared" },
}
</script>
<style lang="scss">
page {
  background-color: #FFFFFF;
}
</style>
<style lang="scss" scoped>
/deep/ .u-checkbox {
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
}

/deep/ .u-checkbox__label {
  display: flex;
  align-items: center;
  height: 100% !important;
  flex: 1 !important;
}
</style>
